<template>
  <div>
    <nav-bar title="库存详情"></nav-bar>
    <div class="maxinBox" v-if="materialDetails">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            材料信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="材料名称" :value="materialDetails.name || '--'"/>
      <van-cell title="材料编号" :value="materialDetails.num || '--'"/>
      <van-cell title="型号规格" :value="materialDetails.model || '--'"/>
      <van-cell title="品牌" :value="materialDetails.brand || '--'"/>
      <van-row>
        <van-col :span="24" class="title">
          <div>
            库存信息
          </div>
        </van-col>
      </van-row>
      <van-cell title="库存数量" :value="materialDetails.inventory || '--'"/>
      <van-cell title="单位" :value="materialDetails.unit || '--'"/>
      <van-cell title="累计入库" :value="materialDetails.inStorage || '--'"/>
      <van-cell title="累计出库" :value="materialDetails.outStorage || '--'"/>
      <van-cell title="库存状态" v-if="materialDetails.status" value="库存正常" />
      <van-cell title="库存状态" v-else value="库存告警" />
      <van-row style="text-align: center;margin-top: 1.25rem;">
        <van-col :span="12">
          <van-button type="warning" style="width: 80%;" size="small" @click="outbound">出库</van-button>
        </van-col>
        <van-col :span="12">
          <van-button type="info" style="width: 80%;" size="small" @click="outboundHistory">出库记录</van-button>
        </van-col>
      </van-row>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        materialDetails: {
          name: '一期工地建筑水泥',
          num: 'QR34642134P',
          model: '325#',
          brand: '永固',
          inventory: '235吨',
          unit: '吨',
          inStorage: '5436吨',
          outStorage: '4572吨',
          status: 0
        }
      }
    },
    methods: {
      outbound() {
        this.$router.push({
          name: 'MaterialOutbound'
        })
      },
      outboundHistory() {
        this.$router.push({
          name: 'MaterialOutboundHistory'
        })
      }
    },
    mounted() {

    }
  }
</script>
<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
